'use strict';
import React, {Component} from 'react';

import {
    View,
    Image,
    ImageBackground,
    Dimensions,
    TouchableWithoutFeedback,
    StyleSheet,
    Text,
    TouchableOpacity,
    TextInput,
    ScrollView,
    TouchableHighlight,
    TouchableNativeFeedback,
    Switch,
    DatePickerIOS,
    DatePickerAndroid,
    Platform
} from 'react-native';

var {Loading, EasyLoading} = require('react-native-easy-loading');
import Color from '../../core/constant/color';
import ToolbarSetProperty from './comp.toolbar-setproperty.js';

let winHeight = Dimensions.get('window').height;//屏幕高度

let navParams;
export default class SetDate extends React.Component {
    // 构造
    constructor(props) {
        super(props);
        navParams = this.props.navigation.state.params;
        //传入的是yyyy-MM-dd的格式，要转化为date
        let valueDate;
        if (navParams.oldValue) {
            let oldYear = navParams.oldValue.substring(0, 4);
            let oldMonth = navParams.oldValue.substring(5, 7) - 1;
            let oldDay = navParams.oldValue.substring(8, 10);
            valueDate = new Date(oldYear, oldMonth, oldDay);
        } else {

            valueDate = new Date();
        }

        this.state = {
            value: valueDate
        }

    }


    componentDidMount() {
        this.setDate();
    }


    async setDate() {

        if (Platform.OS === 'android') {


            let oldYear, oldMonth, oldDay;
            if (this.state.value) {
                oldYear = this.state.csrq.substring(0, 4);
                oldMonth = this.state.csrq.substring(5, 2) - 1;
                oldDay = this.state.csrq.substring(8, 2);
            }

            const {action, year, month, day} = await DatePickerAndroid.open({
                // 要设置默认值为今天的话，使用`new Date()`即可。
                // 下面显示的会是2020年5月25日。月份是从0开始算的。
                date: this.state.value
            });
            if (action !== DatePickerAndroid.dismissedAction) {
                // 这里开始可以处理用户选好的年月日三个参数：year, month (0-11), day
                this.setState({
                    value: new Date(year, month, day)
                })
            }
        }
    }

    getString() {
        return this.state.value.Format('yyyy-MM-dd');
    }

    render() {
        return (
            <View>
                <ToolbarSetProperty
                    navigation={this.props.navigation}
                    text={navParams.title}
                    oldValue={navParams.oldValue}
                    newValue={this.getString()}
                    complete={navParams.callback}
                />
                <ScrollView style={styles.body}>
                    <Loading/>
                    {
                        Platform.OS === 'android' ? <View/> :
                            <DatePickerIOS
                                date={this.state.value}
                                mode="date"
                                onDateChange={(date) => {
                                    this.setState({value: date})
                                }}
                            />
                    }
                </ScrollView>
            </View>
        )
    }
}


const styles = StyleSheet.create({
    body: {
        backgroundColor: Color.VIEW_BGCOLOR,
        height: winHeight,
    },
    zhushi_view: {
        marginLeft: 15,
        marginRight: 15,
        marginTop: 15,
        marginBottom: 0,
        flexDirection: "row",
        justifyContent: "center",
    },
    zhushi_text: {
        color: Color.TEXT_GREY,
        fontSize: 14,

    },
    input_view: {
        padding: 8,
        marginLeft: 0,
        marginRight: 0,
        marginTop: 0,
        marginBottom: 0,
        flexDirection: "row",
        justifyContent: "center",
        backgroundColor: "#ffffff",
        borderBottomWidth: 1,
        borderColor: Color.TEXTINPUT_LINE,
    },
    input_label_view: {
        flex: 1, flexDirection: "row",
    },
    input_label_text: {
        alignSelf: "center",
    },
    input_value_view: {
        flex: 3, flexDirection: "row", justifyContent: "flex-end",
        alignSelf: "center",
    },
    btn: {
        backgroundColor: Color.BTN_BGCOLOR,
        padding: 10,
        margin: 15,
        marginBottom: 0,
        borderRadius: 5,
    },
    btn_text: {
        alignSelf: 'center', fontSize: 15, color: Color.BTN_TEXT
    }
});

